<script setup>
import { addAppointmentsUsingPost } from "@/api/appointmentsController";
import { onMounted, ref } from "vue";
import message from "@arco-design/web-vue/es/message";
import { listBuildingTypeByPageUsingPost } from "@/api/buildingTypeController";
import { addBudgetUsingPost } from "@/api/budgetController";
// import adderss from "@/utitl/address.json";
// const options = adderss;

const isbz = ref(1);
const initSearchParams = {
  current: 1,
  pageSize: 10,
};
const data = ref({
  title: "",
  address: "",
  buildingType: "",
  content: "",
});
const dataBul = ref({
  projectId: "",
  basicRate: 0,
  installationCost: 0,
  materialCost: 0,
  otherCost: 0,
});
const buildingType = ref([]);
const handleOk = () => {
  addAppointmentsUsingPostData();
  isbz.value = 2;
};
const addAppointmentsUsingPostData = async () => {
  const res = await addAppointmentsUsingPost(data.value);
  if (res.data.code == 0) {
    dataBul.value.projectId = res.data.data;
    message.success("项目提交成功");
  } else {
    message.error(res.data.message);
  }
};
const getData = async () => {
  const res = await listBuildingTypeByPageUsingPost(initSearchParams);
  if (res.data.code === 0) {
    buildingType.value = res.data.data?.records || [];
  }
};

const delData = () => {
  for (let key in data.value) {
    data.value[key] = ""; // 或者根据实际情况设置为其他默认值，如 ''、0、false 等
  }
};
const handleOk2 = () => {
  addBudgetUsingPostData();
  isbz.value = 3;
};
const addBudgetUsingPostData = async () => {
  const res = await addBudgetUsingPost(dataBul.value);
  if (res.data.code === 0) {
    message.success("预算提交成功");
  } else {
    message.error(res.data.message);
  }
};
const delData2 = () => {
  for (let key in dataBul) {
    if (key !== "projectId") {
      dataBul.value[key] = 0;
    }
    // 或者根据实际情况设置为其他默认值，如 ''、0、false 等
  }
};
onMounted(() => {
  getData();
});
</script>

<template>
  <div class="submit-reservation">
    <div class="left"></div>
    <div class="reight">
      <a-steps :current="isbz" style="margin-bottom: 10%">
        <a-step>填写项目信息</a-step>
        <a-step>填写项目预算</a-step>
        <a-step>完成</a-step>
      </a-steps>
      <a-form
        v-if="isbz == 1"
        :style="{ width: '600px' }"
        :model="data"
        layout="vertical"
      >
        <a-form-item
          field="name"
          tooltip="Please enter username"
          label="项目名称"
        >
          <a-input placeholder="请填写项目名称" v-model="data.title" />
        </a-form-item>
        <a-form-item
          field="name"
          tooltip="Please enter username"
          label="项目描述"
        >
          <a-textarea
            placeholder="请详细描述项目需求"
            :max-length="{ length: 10000, errorOnly: true }"
            allow-clear
            show-word-limit
            v-model="data.content"
            auto-size
          />
        </a-form-item>
        <a-form-item
          field="name"
          tooltip="Please enter username"
          label="项目类型"
        >
          <a-space direction="vertical" size="large">
            <a-select
              :style="{ width: '320px' }"
              placeholder="请输入项目类型"
              v-model="data.buildingType"
            >
              <a-option v-for="(itme, index) in buildingType" :key="index">
                {{ itme.content }}
              </a-option>
            </a-select>
          </a-space>
        </a-form-item>
        <a-form-item
          field="name"
          tooltip="Please enter username"
          label="项目地址"
        >
          <!--          <a-cascader-->
          <!--            :options="options"-->
          <!--            :default-value="['datunli']"-->
          <!--            :style="{ width: '320px' }"-->
          <!--            placeholder="Please select ..."-->
          <!--            multiple-->
          <!--          />-->
          <a-input placeholder="请填写项目地址" v-model="data.address" />
        </a-form-item>
        <a-form-item>
          <a-button
            type="primary"
            @click="handleOk"
            style="margin-left: 15%; width: 120px"
            >下一步</a-button
          >
          <a-button
            type="primary"
            @click="delData"
            style="margin-left: 20%; width: 120px"
            >清空</a-button
          >
        </a-form-item>
      </a-form>
      <a-form
        v-if="isbz == 2"
        :style="{ width: '600px' }"
        :model="dataBul"
        layout="vertical"
      >
        <a-form-item
          field="name"
          tooltip="Please enter username"
          label="项目id"
        >
          <h1>{{ dataBul.projectId }}</h1>
        </a-form-item>
        <a-form-item
          field="name"
          tooltip="Please enter username"
          label="基础费用"
        >
          <a-input-number
            v-model="dataBul.basicRate"
            :style="{ width: '320px' }"
            placeholder="请输入基础费用"
            class="input-demo"
            :min="0"
            :max="10000000"
          />
        </a-form-item>
        <a-form-item
          field="name"
          tooltip="Please enter username"
          label="安装费用"
        >
          <a-input-number
            v-model="dataBul.installationCost"
            :style="{ width: '320px' }"
            placeholder="Please Enter"
            class="input-demo"
            :min="0"
            :max="10000000"
          />
        </a-form-item>
        <a-form-item
          field="name"
          tooltip="Please enter username"
          label="材料费用"
        >
          <a-input-number
            v-model="dataBul.materialCost"
            :style="{ width: '320px' }"
            placeholder="Please Enter"
            class="input-demo"
            :min="0"
            :max="10000000"
          />
        </a-form-item>
        <a-form-item
          field="name"
          tooltip="Please enter username"
          label="其他费用"
        >
          <a-input-number
            v-model="dataBul.otherCost"
            :style="{ width: '320px' }"
            placeholder="Please Enter"
            class="input-demo"
            :min="0"
            :max="10000000"
          />
        </a-form-item>
        <a-form-item>
          <a-button
            type="primary"
            @click="handleOk2"
            style="margin-left: 15%; width: 120px"
            >提交</a-button
          >
          <a-button
            type="primary"
            @click="delData2"
            style="margin-left: 20%; width: 120px"
            >清空</a-button
          >
        </a-form-item>
      </a-form>
      <h2 v-show="isbz == 3">
        预约申请会在48小时内得到解决请耐心等待！xxxxxxxxxxxxxxx
      </h2>
    </div>
  </div>
</template>

<style scoped>
.submit-reservation {
  display: flex;
}
.left {
  flex: 1.5;
  height: 100vh;
  background-image: url("../../assets/yuyue5.jpeg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.reight {
  flex: 1;
  height: 100vh;
  text-align: center;
}
h2 {
  margin-top: 10%;
  color: #7f7f7f;
}
</style>
